<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>面向对象 Tab</title>
	<link rel="stylesheet" href="./styles/tab.css">
	<link rel="stylesheet" href="./styles/style.css">
</head>

<body>

	<main>
		<h4>
			Js 面向对象 动态添加标签页
		</h4>
		
		<div class="tabsbox" id="tab">
			<!-- tab 标签 -->
			<nav class="fiststnav">
				<ul>
					<li class="liactive" ><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
					<li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
					<li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
				</ul>
				<div class="tabadd">
					<span>+</span>
				</div>
			</nav>

			<!-- tab 内容 -->
			<div class="tabscon">
				<section class="conactive">测试1</section>
				<section>测试2</section>
				<section>测试3</section>
			</div>
		</div>
	</main>

	<script src="js/tab.js"></script>
</body>

</html>
